<template>
  <div class="homeEnter">
    <div class="header">
      <img :src="imgUrl+'/hotel/hotel-bg.png'" alt="" class="banner-bg">
      <img :src="banner" alt="" class="banner">
    </div>

    <div class="hotel">
      <div class="hotel-wrap" v-if="hotelList">
        <div class="hotel-list">
          <div class="hotel-content"
               @click="goHotelDetails(item)"
               v-for="(item, index) in hotelListLeft"
               :key="index">
            <div class="hotel-item">
              <img :src="item.productThumbnail" alt="" class="img">
              <div class="footer">
                <div class="member-exclusive">会员专享</div>
                <div class="desc">{{ item.productName }}</div>
                <div class="price">
                  <div class="sale-price"><span style="font-size: 12px">¥ </span>{{ item.salePrice }}</div>
                  <div class="market-price">¥{{ item.marketPrice }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hotel-list right">
          <div class="hotel-content"
               @click="goHotelDetails(item)"
               v-for="(item, index) in hotelListRight"
               :key="index">
            <div class="hotel-item">
              <img :src="item.productThumbnail" alt="" class="img">
              <div class="footer">
                <div class="member-exclusive">会员专享</div>
                <div class="desc">{{ item.productName }}</div>
                <div class="price">
                  <div class="sale-price"><span style="font-size: 12px">¥ </span>{{ item.salePrice }}</div>
                  <div class="market-price">¥{{ item.marketPrice }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banner: '',
      hotelList: [],
      hotelListLeft: [],
      hotelListRight: []
    }
  },
  created() {
    this.getBanner()
    this.getHotelList()
  },

  methods: {
    // 获取酒店页面banner
    getBanner() {
      this.$HttpPost(this.$api.bannerList, {bannerType: '1'}).then((res) => {
        if (res.code === '000') {
          this.banner = res.content[0].imageUrl
        }
      })
    },

    // 获取酒店页列表
    getHotelList() {
      const params = {
        hotelActivityNo: this.$route.query.activityProductNo
        // hotelActivityNo: 'AT3040700344'

      }
      this.$HttpPost(this.$api.hotelList, params).then((res) => {
        if (res.code === '000') {
          this.hotelList = res.content
          this.hotelList.forEach((item, index) => {
            if (index % 2 === 0) {
              this.hotelListLeft.push(item)
            } else {
              this.hotelListRight.push(item)
            }
          })
        }
      })
    },
    // 酒店详情页面查看
    goHotelDetails(item) {
      if (!item.activityProductNo) {
        return Toast('商品不存在')
      }
      this.$router.push({
        path: '/goods/details',
        query: {
          activityProductNo: item.activityProductNo
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.homeEnter {
  width: 100%;
  background-color: #F7F7F7;
}

.header {
  position: relative;
  width: 100%;
  height: 300px;
  z-index: 0;

  .banner-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .banner {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px;
    height: auto;
    left: 50%;
    top: 70px;
    transform: translate(-50%, 0);
    z-index: 2;
  }
}

//酒店列表
.hotel {
  width: 100%;
  margin-top: 45px;
  box-sizing: border-box;
  padding: 0 20px;

  .hotel-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    overflow: hidden;

    .hotel-list {
      width: 49%;
      display: flex;
      justify-content: flex-start;
      display: flex;
      flex-direction: column;

      .hotel-content {
        width: 100%;
        height: 590px;
        margin-bottom: 24px;
        //-moz-box-shadow: 0px 0px 5px #B5B5B5;
        //-webkit-box-shadow: 0px 0px 5px #B5B5B5;
        //box-shadow: 0px 0px 5px #B5B5B5;
        //box-shadow: 0px 0px 5px #B5B5B5;
        //-webkit-box-shadow: 0px 0px 5px #B5B5B5;
        //box-shadow: 0px 0px 5px #B5B5B5;
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;

        .hotel-item {
          float: left;
          width: 100%;
          height: 100%;
          overflow: hidden;

          .img {
            width: 100%;
            height: 360px;
          }

          .footer {
            box-sizing: border-box;
            padding: 0 20px;

            .name {
              width: 100%;
              margin-top: 10px;
              font-size: 24px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #936231;
              letter-spacing: 2px;
            }

            .member-exclusive {
              width: 100px;
              margin-top: 10px;
              padding: 5px 0;
              background: #f7e3ca;
              border-radius: 8px;
              font-size: 20px;
              font-family: FZLTZHUNHPro;
              text-align: center;
              color: #936231;
              background: #f7e3ca;
              border-radius: 8px;
            }

            .desc {
              width: 100%;
              margin-top: 20px;
              font-size: 28px;
              font-family: FZLTZHUNHPro;
              text-align: left;
              color: #1a1a1a;
              letter-spacing: 0px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }

            .price {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 100%;
              height: 60px;
              margin-top: 15px;

              .sale-price {
                font-size: 48px;
                font-family: FZLTZHPro;
                text-align: left;
                font-weight: 500;
                color: #cb1c37;
                line-height: 30px;
              }

              .market-price {
                height: 100%;
                margin-left: 10px;
                font-size: 24px;
                font-family: FZLTHPro;
                text-decoration: line-through;
                text-align: left;
                line-height: 70px;
                color: #999999;
              }
            }
          }

        }

      }

      &:nth-child(2n) {
        .hotel-content {
          height: 670px;

          .hotel-item {
            .footer {
              .member-exclusive {
                margin-top: 30px;
              }

              .desc {
                margin-top: 40px;
              }

              .price {
                margin-top: 40px;
              }
            }
          }
        }

      }
    }

  }
}

.streamBox {
  width: 44.667vw;
  height: 54vw;
  // background-color: gray;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 20px;

  .imgList {
    width: 44.667vw;
    height: 300px;
    border-radius: 20px;
    border: 1px solid red;
  }

  .hotelName {
    margin-top: 10px;
  }
}
</style>
